<template>
    <div class="login">
        <div class="wrapper">
            <div class="login-box">
                <div class="title">注册页面</div>
                <div>
                    <div>
                        <input
                            type="text"
                            class="phone"
                            placeholder="手机号"
                            @blur="checkPhone()"
                            v-model="phoneNum"
                        />
                    </div>
                    <div>
                        <input
                            type="password"
                            class="password"
                            placeholder="密码"
                            v-model="password"
                        />
                    </div>
                    <span>
                        <input
                            type="text"
                            class="check"
                            placeholder="验证码"
                            v-model="identifyCode"
                        /><button class="btn3" @click="sentCode">
                            发送验证码
                        </button>
                    </span>
                </div>
                <div class="btn">
                    <button type="" class="btn2" @click="register">
                        <router-link to="/login">注册</router-link>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            phoneNum: "",
            password: "",
            identifyCode: "",
        };
    },
    methods: {
        checkPhone() {
            let reg = /1[3456789]\d{9}$/;
            if (!reg.test(this.phoneNum)) {
                console.log($);
                alert("请输入正确的手机号");
            }
        },
        sentCode(e) {
            let reg = /1[3456789]\d{9}$/;
            if (!reg.test(this.phoneNum)) {
                alert("请输入手机号");
            } else if (this.password == "") {
                alert("请输入密码");
            } else {
                let num = 60;
                e.target.disabled = true;
                let timer = setInterval(function() {
                    if (num == 1) {
                        e.target.style.cursor = null;
                        clearInterval(timer);
                        e.target.innerHTML = "重新发送";
                        e.target.disabled = false;
                    } else {
                        e.target.style.cursor = "not-allowed";
                        num--;
                        e.target.innerHTML = num;
                    }
                }, 1000);
            }
        },
        register() {
            if (
                this.phoneNum == "" ||
                this.password == "" ||
                this.identifyCode == ""
            ) {
                alert("请输入所有内容");
            }
            // 发送到后台的内容
        },
    },
};
</script>
<style lang="scss" scoped>
.login {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/bg.jpg);
    background-size: 100% 100%;
    background-repeat: repeat;
    display: flex;
    justify-content: center;
}
.wrapper {
    position: absolute;

    .login-box {
        margin-top: 180px;
        width: 390px;
        height: 360px;
        text-align: center;
        font-size: 20px;
        input {
            padding-left: 10px;
            margin-top: 36px;
            box-sizing: border-box;
            width: 300px;
            height: 38px;
            border-radius: 6px;
            border: 2px solid black;
            background-color: transparent;
            font-size: 20px;
            font-family: "宋体";
            color: black;
        }
        input::-webkit-input-placeholder {
            color: grey;
            font-weight: bold;
            font-size: 20px;
        }
        input:-moz-placeholder {
            color: grey;
            font-weight: bold;
            font-size: 20px;
        }
        input::-moz-placeholder {
            color: grey;
            font-weight: (240, 177, 96);
            font-size: 20px;
        }
        .check {
            width: 200px;
            margin-right: 10px;
        }

        .btn {
            .btn2 {
                width: 75%;
                height: 40px;
                margin: 20px 0px 0px 0px;
                background-color: rgb(43, 175, 43);
                border: 1px solid rgb(43, 175, 43);
                border-radius: 6px;
                cursor: pointer;
                a {
                    text-decoration: none;
                    color: white;
                    font-size: 16px;
                }
            }
        }
        .btn3 {
            cursor: pointer;
            height: 38px;
            border-radius: 4px;
            box-sizing: border-box;
            border: 2px solid black;
            width: 90px;
            a {
                text-decoration: none;
            }
            a:visited {
                color: blue;
                text-decoration: none;
            }
        }
    }
}
.title {
    color: black;
    font-weight: bolder;
    font-family: "微软雅黑";
    letter-spacing: 4px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 36px;
    user-select: none;
}
.alert {
    position: absolute;
    top: 15%;
    left: 50%;
    min-width: 300px;
    max-width: 600px;
    transform: translate(-50%, -50%);
    z-index: 99999;
    text-align: center;
    margin: 10px;
    padding: 15px;
    border-radius: 3px;
}

.alert-success {
    display: none;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-info {
    display: none;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-warning {
    display: none;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    display: none;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}</style
>``
